<template>
  <div class="payDetail">
    <el-tabs type="border-card">
      <el-tab-pane label="缴费信息详情">
        <el-form style="padding:40px" :inline="true" :model="formInline" class="demo-form-inline">

          <el-form-item label="缴费产品：">
            <el-input disabled style="width:400px;margin-right:80px" v-model="formInline.payname"
              placeholder="缴费产品"></el-input>
          </el-form-item>

          <el-form-item label="缴费人员：">
            <el-input disabled style="width:400px;margin-right:80px" v-model="formInline.username"
              placeholder="缴费人员"></el-input>
          </el-form-item><br>

          <el-form-item label="缴费金额：">
            <el-input disabled style="width:400px;margin-right:80px" v-model="formInline.paymoney"
              placeholder="缴费金额"></el-input>
          </el-form-item>

          <el-form-item label="缴费优先级：">
            <el-input disabled style="width:400px;margin:0 80px 0 -13px" v-model="formInline.paylevel"
              placeholder="缴费优先级"></el-input>
          </el-form-item><br>

          <el-form-item label="支付时间：">
            <el-input disabled style="width:400px;margin-right:80px" v-model="formInline.paytime" placeholder="支付时间">

            </el-input>
          </el-form-item>

          <el-form-item label="支付状态:" prop="coststatus">
            <el-select disabled v-model="str2" style="width: 400px;margin-left:13px" clearable placeholder="请选择支付状态">
              <el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item><br>

          <el-form-item label="支付类型:" prop="costtype">
            <el-radio disabled><img src="../../../../assets/images/zfb1.png" alt="" width="100px"></el-radio>
            <el-radio disabled><img src="../../../../assets/images/wx1.png" width="100px"></el-radio>
            <el-radio disabled><img src="../../../../assets/images/ysf.png" width="100px"></el-radio>

          </el-form-item>
          <el-form-item label="回复内容：">
          </el-form-item>
          <el-button @click="handleFh" type="primary">
            <span class="iconfont">&#xe6b1;</span>
            返回
          </el-button>
        </el-form>

      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ids: null,
      str: "",
      str2: "",
      formInline: {
        username: "",
        payname: "",
        costtype: "",
        coststatus: "",
        paytime: "",
        paymoney: "",
        paylevel: "",

      },
      options2: [
        {
          value: 1,
          label: "已支付",
        },
        {
          value: 2,
          label: "未支付",
        },
      ],
      options: [
        {
          value: 1,
          label: "支付宝支付",
        },
        {
          value: 2,
          label: "微信支付",
        },
        {
          value: 3,
          label: "银联支付",
        },
      ],
    }
  },
  methods: {
    handleSearch() {
      this.obj = this.$route.query
      this.ids = this.obj.detailId
      console.log(this.ids, "333")
      this.$Axios({
        url: "/cost/getCostDetail",
        method: "get",
        data: {
          id: this.ids
        },
        success: (result) => {
          setTimeout(() => {
            this.formInline.paytime = result[0].paytime.substring(0, 10) + result[0].paytime.substring(13, 16)
            this.formInline.username = result[0].username
            this.formInline.payname = result[0].payname
            this.str = result[0].costtype
            this.formInline.paymoney = result[0].paymoney
            this.formInline.paystatus = result[0].paystatus
            this.str2 = result[0].coststatus
            this.formInline.paylevel = result[0].paylevel
            // this.handleClick()
          }, 200);
        },
      });


    },
    handleFh() {
      this.$router.push("/pay/payMessage")
    }
  },
  mounted() {
    this.handleSearch()
  }
}
</script>
<style lang="scss" scoped>
// 引入图标
@import "../../../../assets/icon/iconfont.css";
.payDetail::v-deep {
  button {
    position: fixed;
    top: 200px;
    right: 40px;
  }

  .el-form {
    .el-form-item {
      &:nth-child(11) {
        display: block;
        margin-top: 30px;
      }
    }
  }

}
</style>